import {
  FC,
  // useState
} from 'react'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import styles from './ManageLayout.module.scss'
import { Button, Divider, message, Space } from 'antd'
import { BarsOutlined, DeleteOutlined, PlusOutlined, StarOutlined } from '@ant-design/icons'
import { createQuestionService } from '../services/question'
import { useRequest } from 'ahooks'

const ManageLayout: FC = () => {
  const nav = useNavigate()
  const { pathname } = useLocation()
  // const [loading, setLoading] = useState(false)

  // async function onHandleCreateClick() {
  //   setLoading(true)
  //   const data = await createQuestionService()
  //   const { _id: id } = data || {}
  //   if (id) {
  //     nav({ pathname: `/question/edit/${id}` })
  //     message.success('创建成功')
  //   }

  //   setLoading(false)
  // }

  const { loading, run: onHandleCreateClick } = useRequest(createQuestionService, {
    manual: true,
    onSuccess: ({ id }) => {
      nav({ pathname: `/question/edit/${id}` })
      message.success('创建成功')
    },
  })

  return (
    <div className={styles.container}>
      <div className={styles.left}>
        <Space direction="vertical">
          <Button type="primary" size="large" icon={<PlusOutlined />} disabled={loading} onClick={onHandleCreateClick}>
            新建问卷
          </Button>
          <Divider />
          <Button
            type={pathname.startsWith('/manage/list') ? 'default' : 'text'}
            size="large"
            icon={<BarsOutlined />}
            onClick={() => nav({ pathname: '/manage/list' })}
          >
            我的问卷
          </Button>
          <Button
            type={pathname.startsWith('/manage/star') ? 'default' : 'text'}
            size="large"
            icon={<StarOutlined />}
            onClick={() => nav({ pathname: '/manage/star' })}
          >
            星标问卷
          </Button>
          <Button
            type={pathname.startsWith('/manage/trash') ? 'default' : 'text'}
            size="large"
            icon={<DeleteOutlined />}
            onClick={() => nav({ pathname: '/manage/trash' })}
          >
            回收站
          </Button>
        </Space>
      </div>
      <div className={styles.right}>
        <Outlet />
      </div>
    </div>
  )
}

export default ManageLayout
